<template>
  <div class="welcome">
    <h1>欢迎来到里欧12306售票系统</h1>
    <div style="border: 4px solid orange; border-radius: 4px; padding: 10px">
      <h3>
        <b>示例网站说明（网站实现的功能课程都有手把手教）</b>
      </h3>
      本项目共有15张业务表，会手把手教自制通用代码生成器，快速生成增删改查包含界面，减少无意义的增删改查占用课程时间。
      <br />
      购票流程看起来简单，但用了很多看不见的高并发技术，比如10万人抢1000张票：
      <br />
      <li>
        利用
        <b>CDN</b>
        ，提高用户访问页面速度
      </li>
      <li>
        利用
        <b>分布式缓存</b>
        ，在秒杀开始前，提供高性能余票查询，同时要考虑缓存击穿、穿透、雪崩等问题
      </li>
      <li>
        使用
        <b>第一层验证码</b>
        ，纯前端验证码在前端削弱瞬时高峰，将100毫秒内10万人的请求，分散成1~2秒内10万人请求
      </li>
      <li>
        使用
        <b>第二层验证码</b>
        ，后端验证码，进一步分散请求，同时防止机器人抢票
      </li>
      <li>
        使用
        <b>限流技术</b>
        减轻无谓请求，同时给用户快速失败响应（告知票没有了），将9万请求快速失败，变成1万请求抢1000张票
      </li>
      <li>
        使用
        <b>令牌发放技术</b>
        ，控制抢票量，同时防止机器人刷票，比如开放2000令牌，即变成8000请求快速失败，变成2000请求抢1000张票
      </li>
      <li>
        使用
        <b>分布式锁技术</b>
        ，防止超卖，即2000人抢1000张票，最终只能卖出1000张，不能卖出1001张票
      </li>
      <li>
        使用
        <b>异步削峰+排队机制</b>
        ，解决吞吐量问题，实现最短时间内给用户反馈，1000请求告知票没有了，1000请求告知排队中
      </li>
      <li>
        使用
        <b>分布式事务</b>
        ，保证数据最终一致性，不能库存减少了，票却没打出来。
      </li>
    </div>
    <div>
      <h3>控台端总体分成四大部分：</h3>
      <ul>
        <li>基础数据：用于维护所有的火车基础数据，包括车次、车站、车厢、座位等</li>
        <li>业务数据：用于维护每天的车次信息及余票信息，设置购票令牌，查看购票订单等</li>
        <li>会员管理：用于管理会员、乘客、已出的车票等</li>
        <li>跑批管理：用于管理系统所有的跑批信息，包括跑批的新增、删除、暂停、重启、重跑等</li>
      </ul>
    </div>
    <h2>当前会员人数：{{ memberCount }}</h2>
    Content
  </div>
</template>
<script setup lang="ts">
import { memberApi } from '@/api/member';
import { onMounted, ref } from 'vue';
onMounted(() => {
  getMemberCount();
});

const memberCount = ref<number>(0);
const getMemberCount = async (): Promise<void> => {
  const { data } = await memberApi.getMemberCount();
  console.log('data', data);
  memberCount.value = data || 0;
};
</script>

<style scoped lang="less">
.welcome {
}
</style>
